<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/login.css">
</head>

<body>
    <div id="app">
        <header>
            <a href="./index.html">
                <i class="iconfont icon-zuojiantou"></i>
            </a>
            <p>会员登录</p>
        </header>
        <div class="main">
            <h2>手机号登录</h2>
            <p>未注册的手机号登录后将自动注册</p>
            <form action="">
                <div class="tele active">
                    <input type="text" name="telNumber" id="" placeholder="请输入手机号" v-model="tel">
                </div>
                <div class="yzm active">
                    <input type="text" name="yzm" value="" placeholder="请输入图形验证码" v-model="yzm">
                    <div class="base">
                        <img :src="yzmImg" alt="" @click="dd">
                    </div>

                </div>
                <div class="dxyzm active">
                    <input type="text" name="text" id="" placeholder="请输入短信验证码" v-model="text">
                    <button type="button" name="but" id="but" @click="btn" v-if="i==0">获取验证码</button>
                    <button type="button" name="but" id="but" v-else>{{i}}秒后重新获取</button>
                </div>
                <button type="button" id="btn" @click="login">登录</button>
            </form>
        </div>
    </div>
</body>
<script src="./js/axios.js"></script>
<script src="./js/form-serialize.js"></script>
<script src="./js/vue.js"></script>
<!-- <script src="./js/login.js"></script> -->
<script>
    axios.defaults.baseURL = "http://cba.itlike.com/public/index.php?s=/api";
    const app = new Vue({
        el: "#app",
        data: {
            yzmImg: '',
            tel: '',
            yzm: '',
            text: '',
            key: '',
            i: 0
        },
        created() {
            this.yzmHq()
        },
        methods: {
            // 获取图形验证码
            async yzmHq() {
                const res = await axios.get("/captcha/image")
                console.log(res)
                this.yzmImg = res.data.data.base64
                this.key = res.data.data.key
            },
            dd() {
                this.yzmHq()
            },
            // 获取手机验证码
            async btn() {
                this.i = 60
                const res = await axios.post("/captcha/sendSmsCaptcha", {
                    form: {
                        mobile: this.tel,
                        captchaKey: this.key,
                        captchaCode: this.yzm,
                    },
                })

                const a = setInterval(() => {
                    this.i--
                    if (this.i === 0) {
                        clearInterval(a)
                    }
                }, 1000)
            },
            // 登录
            async login() {
                const res = await axios.post("/passport/login", {
                    form: {
                        isParty: false,
                        mobile: this.tel,
                        partyData: {},
                        smsCode: this.text,
                    },
                })
                console.log(res)
                localStorage.setItem('vue-token', res.data.data.token)
                location.href = './home.html'
            }
        },
        watch: {

        }


    })
</script>

</html>